<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商户账户名称：">
          <el-input
            v-model="formInline.merchantName"
            placeholder="请输入商户账户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺名称：">
          <el-input
            v-model="formInline.shopName"
            placeholder="请输入店铺名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="add">
        <el-button type="primary" @click="handleAdd">新增参与商家</el-button>
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:discountType="{ scope }">
            <div class="zhe" v-if="scope.row.discountType == 1">{{scope.row.discount}}折</div>
            <div class="zhe" v-if="scope.row.discountType == 2">无</div>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="handleEdit(scope.row)" type="primary">编辑</el-button>
          <el-button @click="handleDetele(scope.row.id)"  type="danger">删除</el-button>
        </template>
      </ex-table>
    </div>
    <add-merchants-dialog
      ref="childRef"
      v-if="addMerchantsDialog"
      :assetId="assetId"
      :id="id"
      :pathType="pathType"
      :visible.sync="addMerchantsDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
// components
import {wealList,deleteCardShop} from "@/api/bridgeCard";
import addMerchantsDialog from "./components/addMerchantsDialog"
import handlePageMixin from "@/mixins/handlePageMixin";
export default {
  name: "billList",
  components: {
    addMerchantsDialog
  },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      addMerchantsDialog: false,
      formInline: {
        merchantName: "", //商家名称
        shopName: "", //店铺名称
      },
      assetId: '',
      id: '',
      pathType: 'add',
      tableData: [],
      tableColumn: [
        { prop: "merchantName", label: "商家账号名称" },
        { prop: "shopName", label: "店铺名称" },
        { prop: "serviceFee", label: "平台服务费率（%）" },
        { prop: "settlementTypeDict", label: "结算方式" },
        { prop: "discountType", label: "消费打折",slot: true, slotName: "discountType" },
        { prop: "activityContent", label: "其他活动", width: 120 },
        { prop: "cardMoney", label: "到店累计消费金额（¥）", width: 120 },
        { prop: "manNum", label: "到店累计消费人数", width: 120 },
        { prop: "orderNum", label: "到店累计消费订单数", width: 120 },
        { label: "操作", slot: true, slotName: "operate" , width: 200 },
      ],
    };
  },
  computed: {
    
  },
  created(){
    this.assetId = this.$route.query.assetId
  },
  mounted() {
    this.getList();
  },
  methods: {
    search() {
      //搜索
      console.log(this.formInline);

      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      this.formInline = {};
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    getList() {
      //商家列表
      const params = {
        assetId: this.assetId,
        ...this.pageOptions,
        ...this.formInline,
      };
      this.loading = true;
      wealList(params)
        .then((res) => {
          const { total, records } = res.result;
          this.tableData = records;
          this.$refs.table.pageOptions.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //新增商家
    handleAdd(){
      this.addMerchantsDialog = true
      this.pathType = "add"
    },
    _handleSuccess(data) {
      console.log("data", data);
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    //编辑
    handleEdit(row){
      this.pathType = "edit"
      this.addMerchantsDialog = true
      this.assetId = row.assetId
      this.id = row.id
    },
    //删除
    handleDetele(id){
      this.$confirm('是否删除该商家？','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteCardShop(id).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1500,
          });
          setTimeout(()=>{
            this._handleSuccess();
          },500)
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
  display: inline-block;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
  .add{
    margin-bottom: 20px;
  }
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.zhe{
  text-align: center;
}
</style>
